<template>
  <div class="test">scss语法的学习
    <p>测试</p>
  </div>

</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
// 利用$进行声明变量
$highlight-color:#f90; //全局变量
$border: 1px solid #666; //全局变量
.test{
    background-color: $highlight-color;
    border: $border;
    p{
        $width:200px; //局部变量
        width: $width;
        height: $width;
        color: #00ff00;
        border: $border;

        // &表示父选择器
        // 在这里&就表示p这个父选择器
        &:hover{
            color: skyblue;
        }
    }
    // p:hover{
    //     color: skyblue;
    // }
}
</style>
